<template>
  <mu-container>
    <mu-appbar
      class="header_title"
      style="width: 100%; margin-bottom: 15px"
      title="未处理订单"
      color="#d81b60"
    ></mu-appbar>
    <div style="width: 100%; margin-bottom: 35px">
      <mu-list class="list" v-for="item in progressData" :key="item.id">
        <mu-list-item>
          <mu-list-item-title>
            <mu-linear-progress
              mode="determinate"
              :value="item.buyNum"
              :size="16"
              color="blue"
            ></mu-linear-progress>
          </mu-list-item-title>
        </mu-list-item>
        <span class="list_icon">
          <p class="list_name" v-if="item.orderState === '0'">
            订单状态：未处理
          </p>
          <p class="list_name" v-if="item.orderState === '1'">
            订单状态：已购买
          </p>
          <p class="list_name" v-if="item.orderState === '2'">
            订单状态：已取消
          </p>
          <mu-icon size="20" value="arrow_downward"></mu-icon>
        </span>
        <p class="list_id">订单编号：{{ item.id }}</p>
        <p class="list_desc">用户编号：{{ item.userId }}</p>
        <p class="list_num">商品编号：{{ item.goodsId }}</p>
        <p class="list_buy_num">购买数量：{{ item.buyNum }}</p>
        <mu-button color="secondary" small @click="lookDetail(item)"
          >查看详情</mu-button
        >
      </mu-list>
    </div>
    <mu-dialog :open.sync="dialogOpen" title="订单详情" :maxWidth="400">
      <!-- 对话框的内容放在这里 -->
      <p class="list_id">订单创建时间：{{ nowOrder.createTime }}</p>
      <p class="list_desc">商品名称：{{ nowOrder.goodsName }}</p>
      <p class="list_num">商品价格：{{ nowOrder.goodsPrice }}</p>
      <p class="list_buy_num">购买数量：{{ nowOrder.buyNum }}</p>
      <br />
      <mu-button color="secondary" small @click="payOrder">支付订单</mu-button>
      &emsp;
      <mu-button color="primary" small @click="cancelOrder">取消订单</mu-button>
    </mu-dialog>
    <mu-dialog :open.sync="dialogTipOpen" title="操作确认" :maxWidth="300">
      <!-- 对话框的内容放在这里 -->
      <p>确定要{{ operation }}吗？</p>
      <mu-button color="secondary" small @click="operateOrderFinal"
        >确定</mu-button
      >
      &emsp;
      <mu-button color="primary" small @click="closeTipDialog">取消</mu-button>
    </mu-dialog>
  </mu-container>
</template>
    
    <script>
// import axios from "axios";
export default {
  data() {
    return {
      progressData: [],
      dialogOpen: false,
      dialogTipOpen: false,
      goods: {},
      nowOrder: {},
      order: {},
      operation: 0,
    };
  },
  methods: {
    lookDetail(item) {
      //   console.log(item);
      // 根据goodsId获得goods
      this.order = item;
      this.getGoodsById(item);
    },
    payOrder() {
      this.dialogTipOpen = true;
      this.operation = "支付订单";
    },
    cancelOrder() {
      this.dialogTipOpen = true;
      this.operation = "取消订单";
    },
    operateOrderFinal() {
      if (this.operation === "支付订单") {
        this.operation = "payOrder";
      } else {
        this.operation = "cancelOrder";
      }
      this.$axios({
        method: "put",
        url: "/easyshop/" + this.operation,
        params: null,
        data: this.order,
      })
        .then((res) => {
          // console.log(res.data);
          let resData = res.data;
          if (resData.code === 200) {
            this.$toast.success(resData.message);
            this.getOrderList(this.order.userId, "0");
          } else {
            this.$toast.error(resData.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogTipOpen = false;
      this.dialogOpen = false;
    },
    closeTipDialog() {
      this.dialogTipOpen = false;
      this.dialogOpen = false;
    },
    getGoodsById(item) {
      this.$axios({
        method: "get",
        url: "/easyshop/getGoodsByGoodsId",
        params: {
          goodsId: item.goodsId,
        },
        data: null,
      })
        .then((res) => {
          // console.log(res.data);
          let resData = res.data;
          if (resData.code === 200) {
            this.goods = resData.data.goods;
            this.nowOrder = {
              createTime: item.createTime,
              buyNum: item.buyNum,
              goodsName: this.goods.goodsName,
              goodsPrice: this.goods.goodsPrice,
            };
            this.dialogOpen = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getOrderList(id, state) {
      // 获得用户的订单
      this.$axios({
        method: "get",
        url: "/easyshop/getOnesOrderList",
        params: {
          userId: id,
          orderState: state,
        },
        data: null,
      })
        .then((res) => {
          // console.log(res.data);
          let resData = res.data;
          if (resData.code === 200) {
            this.progressData = resData.data.userOrders;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.$parent.showNav = true;
    // 从 Local Storage 中检索数据
    let user = JSON.parse(localStorage.getItem("user"));
    this.getOrderList(user.id, "0");
  },
};
</script>
    
    <style lang="less">
.list {
  margin-top: -1px;
  border: 1px solid #ccc;
  padding-top: 5px;
}
.list_name {
  font-size: 20px;
  font-weight: 600;
  color: rgb(240, 49, 16);
}
.list_id {
  font-size: 14px;
  font-weight: 600;
  color: rgb(188, 86, 235);
}
.list_desc {
  font-size: 14px;
  font-weight: 600;
  color: rgb(86, 168, 235);
}
.list_num {
  font-size: 14px;
  font-weight: 600;
  color: rgb(89, 180, 61);
}
.list_buy_num {
  font-size: 14px;
  font-weight: 600;
  color: rgb(49, 216, 238);
}
</style>